<template>
	<div class="personType">
		<div class="listitem" v-for="(item, index) in typeList" :key="index" @click="typeClick(item.name)">
			<div class="div">
				<i :class="item.iconClass" :style="`color:${item.color}`"></i>
			</div>
			<div class="div divText">
				<div>活跃度(万)</div>
				<div>{{ item.personNum }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue, { ref, onMounted, defineComponent, nextTick, reactive } from 'vue'
import { lineEchart } from '../../../mockData/echarts'
export default defineComponent({
	name: 'personType',
	components: {},
	setup() {
		const typeList = reactive([
			{ iconClass: 'iconfont icon-Vue', personNum: 99999, color: '#42b983', name: 'Vue' },
			{ iconClass: 'iconfont icon-react', personNum: 99999, color: '#61dafb', name: 'React' },
			{ iconClass: 'iconfont icon-angular', personNum: 99999, color: '#1976d2', name: 'Angular' },
			{ iconClass: 'iconfont icon-flutter', personNum: 99999, color: '#f27573', name: 'Flutter' },
		])

		const typeClick = (name: string) => {
			lineEchart.series.forEach((item: any) => {
				if (item.name == name) {
					item.data[item.data.length - 1] = item.data[item.data.length - 1] * 10
				}
			})
		}

		return {
			typeClick,
			typeList,
		}
	},
})
</script>

<style scoped lang="scss">
.personType {
	height: 140px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.listitem {
	height: 108px;
	width: 22%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	.div {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		text-align: left;
	}
	.divText {
		height: 60%;
		font-size: 18px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: rgba(0, 0, 0, 0.45);
		div {
			width: 100%;
		}
		div:nth-child(2) {
			color: #666;
		}
	}
	i {
		font-size: 60px;
	}
}
</style>
